define("base", (require, exports, module) => {
  const toStyle = (val) => {
    let style = [];
    for (let name in val)
      name !== "" &&
        style.push(name.replace(/\s+/gim, "") + ":'" + val[name] + "'");
    var a = [];
    style.forEach((e) => {
      e = e.split(":");
      a.push(
        e[0]
          .replace(/\"/gi, "")
          .replace(/\'/gi, "")
          .replace(/[a-zA-Z]/gim, (a) => {
            return /[A-Z]/.test(a) ? "-" + a.toLowerCase() : a;
          }) +
          ":" +
          e[1].replace(/\"/gi, "").replace(/\'/gi, "")
      );
    });
    return a.join(";") + ";";
  };
  exports.base = function (dom) {
    class CustomElement extends HTMLElement {
      constructor() {
        super();
        return this;
      }
      disabled = false;
      createShadowRoot() {
        const shadowRoot = this.attachShadow({ mode: "open" });
        this._shadowRoot = shadowRoot;
        return shadowRoot;
      }
      attributeChangedCallback(name, oldValue, newValue) {
        console.log("change", name, oldValue, newValue);
      }
      bindDefault() {
        const self = this;
        const domUseOps = dom.useOptions;
        const attrs = [...(this.attributes || [])];
        attrs.forEach((item) => {
          if (/^(\:|bind\:)/.test(item.name)) {
            let attrName = item.name.replace(/^(\:|bind\:)/gim, "");
            let attrRes = item.value;
            this.removeAttribute(item.name);
            this[attrName] =
              domUseOps && attrRes in domUseOps.data
                ? domUseOps.data[attrRes]
                : this.name === "routerLink"
                ? /^{.+}/.test(attrRes)
                  ? new Function("return " + attrRes)()
                  : attrRes
                : eval(attrRes);
          } else if (/^(\@|on\:)/.test(item.name)) {
            let handleName = item.name.replace(/^(\@|on\:)/gim, "");
            let handleRes = item.value;
            if (handleRes && domUseOps.methods) {
              const handleFn = domUseOps.methods[handleRes];
              if (handleFn) {
                const handleProxyFn = function (e) {
                  handleFn.call(self, e, this);
                };
                this["_bind_" + handleName] = handleProxyFn;
                this.removeAttribute(item.name);
                !this.disabled
                  ? this.addEventListener(handleName, handleProxyFn)
                  : this.removeEventListener(handleName, handleProxyFn);
              } else {
                console.error(
                  "[Error]",
                  `Set event ${handleName} error.`,
                  this
                );
              }
            }
          } else {
            switch (item.name) {
              case "disabled":
                this[item.name] = item.value === "disabled" ? true : false;
                break;
              case "style":
                this["_" + item.name] =
                  typeof item.value === "string"
                    ? item.value
                    : toStyle(item.value);
                break;
              case "text":
                this[item.name] = item.value;
                break;
            }
          }
        });
      }
      connectedCallback() {}
      disconnectedCallback() {}
      adoptedCallback() {}
    }
    dom.customElement = CustomElement;
  };
});
